<template>
  <div class="common-table-component">
    <a-table
      :columns="columns"
      :data-source="data"
      :loading="loading"
      :pagination="false"
      :scroll="{ x: 'max-content' }"
      :row-selection="{ selectedRowKeys, onChange: handleSelectionChange }"
      :row-key="(record) => record.id"
      @change="handleTableChange"
    >
      <template #bodyCell="{ column, record }">

        <!-- 状态列插槽 -->
        <template v-if="column.key === 'status'">
          <div class="status-tag">
            <a-switch
              :checked="record.status === 1"
              :loading="record.statusLoading"
              @change="(checked) => handleStatusChange(record.id, checked ? 1 : 0)"
            />
          </div>
        </template>
        
        <!-- 操作列插槽 -->
        <template v-if="column.key === 'action'">
          <div class="action-column">
            <a-button type="link" size="small" @click="handleEdit(record)">
              <template #icon><EditOutlined /></template>{{ $t('common.edit') }}
            </a-button>
            <a-button type="link" size="small" @click="handleAssignPermissions(record)">
              <template #icon><SafetyOutlined /></template>{{ $t('role.assignPermissions') }}
            </a-button>
            <a-button type="link" size="small" danger @click="handleDelete(record)">
              <template #icon><DeleteOutlined /></template>{{ $t('common.delete') }}
            </a-button>
          </div>
        </template>
      </template>
    </a-table>
    
    <!-- 自定义分页组件 -->
    <Pagination
      v-if="pagination"
      :total="pagination.total || 0"
      :current="pagination.current || 1"
      :pageSize="pagination.pageSize || 10"
      :showQuickJumper="true"
      :showSizeChanger="true"
      @change="(page, pageSize) => handlePaginationChange(page, pageSize)"
    />
  </div>
</template>

<script lang="ts" setup>
import type { TablePaginationConfig } from 'ant-design-vue/es/table'
import type { Key } from 'ant-design-vue/es/table/interface'
import type { Role } from '@/types/api/system/role'
import { useTableColumns } from '../config/tableColumns'
import Pagination from '@/components/common/Pagination.vue'

// 组件名称
defineOptions({
  name: 'RoleTable'
})

// 组件属性
const props = withDefaults(defineProps<{
  loading?: boolean
  data: Role[]
  selectedRowKeys: Key[]
  pagination?: TablePaginationConfig
}>(), {
  loading: false,
  data: () => [],
  selectedRowKeys: () => [],
  pagination: () => ({
    current: 1,
    pageSize: 10,
    total: 0,
    showSizeChanger: true,
    showQuickJumper: true
  })
})

// 组件事件
const emit = defineEmits<{
  (e: 'selection-change', keys: Key[]): void
  (e: 'table-change', pagination: TablePaginationConfig, filters: any, sorter: any): void
  (e: 'edit', record: Role): void
  (e: 'delete', record: Role): void
  (e: 'permission', record: Role): void
  (e: 'status-change', id: string, status: number): void
}>()

const { columns } = useTableColumns()

/**
 * 表格选择变更处理
 * @param selectedKeys 选中的行键值
 */
const handleSelectionChange = (selectedRowKeys: Key[]) => {
  emit('selection-change', selectedRowKeys)
}

/**
 * 表格分页、排序、筛选变更处理
 * @param pagination 分页信息
 */
const handleTableChange = (_: TablePaginationConfig, filters: any, sorter: any) => {
  emit('table-change', props.pagination, filters, sorter)
}

/**
 * 处理自定义分页变更
 * @param page 页码
 * @param pageSize 每页条数
 */
const handlePaginationChange = (page: number, pageSize: number) => {
  const newPagination = {
    ...props.pagination,
    current: page,
    pageSize: pageSize
  }
  emit('table-change', newPagination, {}, {})
}

/**
 * 编辑角色处理
 * @param record 角色记录
 */
const handleEdit = (record: any) => {
  emit('edit', record)
}

/**
 * 删除角色处理
 * @param record 角色记录
 */
const handleDelete = (record: any) => {
  emit('delete', record)
}

/**
 * 分配权限处理
 * @param record 角色记录
 */
const handleAssignPermissions = (record: any) => {
  emit('permission', record)
}

/**
 * 状态开关处理
 * @param id 角色ID
 * @param checked 是否选中
 */
const handleStatusChange = (id: string, status: number) => {
  emit('status-change', id, status)
}
</script>

<style lang="scss" scoped>
@import '@/assets/styles/views/common.scss';
</style> 